<template>
  <div class="button">
    <div>
      <dui-button
        theme="button"
        size='normal'
        @click="onClick"
        @focus="onFocus"
        @mouseover="onMouseover"
      >button</dui-button>
      <dui-button
        theme="link"
        size='normal'
        @click="onClick"
        @focus="onFocus"
        @mouseover="onMouseover"
      >link</dui-button>
      <dui-button
        theme="text"
        size='normal'
        @click="onClick"
        @focus="onFocus"
        @mouseover="onMouseover"
      >text</dui-button>
    </div>

    <div>
      <dui-button size="big">大大大</dui-button>
      <dui-button>普普通</dui-button>
      <dui-button size="small">小小小</dui-button>
    </div>
    <div>
      <dui-button theme="link" size="big">大大大</dui-button>
      <dui-button theme="link">普普通</dui-button>
      <dui-button size="small" theme="link">小小小</dui-button>
    </div>
    <div>
      <dui-button size="big" theme="text">大大大</dui-button>
      <dui-button theme="text">普普通</dui-button>
      <dui-button size="small" theme="text">小小小</dui-button>
    </div>

    <div>
      <dui-button level="main">主要按钮</dui-button>
      <dui-button>普通按钮</dui-button>
      <dui-button level="danger">危险按钮</dui-button>
    </div>
    <div>
      <dui-button theme="link" level="main">主要链接按钮</dui-button>
      <dui-button theme="link">普通链接按钮</dui-button>
      <dui-button theme="link" level="danger">危险链接按钮</dui-button>
    </div>
    <div>
      <dui-button theme="text" level="main">主要文字按钮</dui-button>
      <dui-button theme="text">普通文字按钮</dui-button>
      <dui-button theme="text" level="danger">危险文字按钮</dui-button>
    </div>

    <div>
      <dui-button disabled>禁用按钮</dui-button>
      <dui-button theme="link" disabled>禁用链接按钮</dui-button>
      <dui-button theme="text" disabled>禁用按钮</dui-button>
      <dui-button theme="link" level="main" disabled>禁用链接按钮</dui-button>
      <dui-button theme="text" level="main" disabled>禁用按钮</dui-button>
    </div>

    <div>
      <dui-button loading>加载中</dui-button>
      <dui-button>加载完毕</dui-button> 
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import duiButton from '../dui/Button.vue';

export default {
  components: { duiButton },
  setup () {
    const value = ref(false);
    const onClick = () => {
      console.log('onClick!')
    }

    const onFocus = () => {
      console.log('onFocus!')
    }

    const onMouseover = () => {
      console.log('onMouseover!')
    }

    return { value, onClick, onFocus, onMouseover }
  }
}
</script>

<style lang="scss" scoped>
  div {
    margin-bottom: 10px;
  }
</style>